<template>
  <div>
    <el-dialog title="导入" :visible.sync="dialogShow" width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form ref="form" :model="formModel" label-width="110px" size="small" label-position="right">
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractCode" :rules="[{ required: true, message: '请输入合同编号', trigger: 'blur' }]">
              <el-input maxlength="200" v-model="formModel.contractCode" placeholder="合同编号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变更编码" prop="changeCode" :rules="[{ required: true, message: '请输入合同编号', trigger: 'blur' }]">
              <el-input maxlength="200" v-model="formModel.changeCode" placeholder="合同编号" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-button type="text" class="blue-txt margin-left-10 font-size-16" @click="addFile">添加附件</el-button>

      <el-form v-for="(item, index) in fileList" :key="item.guid" :ref="`file${index}`" label-width="110px" size="small" :model="item" label-position="right">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="附件类型" prop="bizType" :rules="[{ required: true, message: '请选择附件类型', trigger: 'change' }]">
              <el-select v-model="item.bizType" placeholder="请选择">
                <el-option v-for="item in bizTypeList" :key="item.key" :label="item.value" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="附件名称" prop="fileTitle" :rules="[{ required: true, message: '请输入附件名称', trigger: 'blur' }]">
              <el-input v-model="item.fileTitle" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="附件上传" prop="fileUrl" :rules="[{ required: true, message: '请上传附件', trigger: 'change' }]">
              <uploadFile buttonType="text" isShowList="" filed-name="file" :max-size="70" accept-file-type=".xlsx,.xls,.csv,.png,.jpg,.Png,.Jpg,.docx,.pdf,.zip" @handleSuccess="handleSuccess($event, index)">
                <template v-slot:info>
                  <div slot="tip" class="margin-left-10 upload-inline">
                    <el-link type="primary" v-if="item.fileUrl" @click="uploadLoad(item.fileUrl)">文件</el-link>
                    <i class="el-icon-delete el-icon--right color-409EFF padding-top-12" @click.stop="deleteFile(index)"></i>
                  </div>
                </template>
              </uploadFile>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="hideDialog">取 消</el-button>
        <el-button size="small" type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { apiContractFileBind } from '../../../api/index';
  import uploadFile from '@/common/components/upload.vue';
  import { guid } from '@/common/js/utils';
  import { requestTips } from '@/common/js/utils.js';

  export default {
    props: {
      bizTypeList: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    data() {
      return {
        formModel: {
          contractCode: '',
          changeCode: '',
        },
        dialogShow: false,
        fileList: [],
        validateArr: [],
      };
    },

    methods: {
      async init() {
        this.dialogShow = true;
        await this.$nextTick()
        this.$refs.form.clearValidate();
        this.fileList = [];
        this.formModel.contractCode = '';
        this.formModel.changeCode = '';
      },

      async save() {
        this.validateArr = [];
        this.$refs.form.validate(valid => {
          if (!valid) {
            this.validateArr.push(1);
          }
        });
        this.validateFn();
        if (this.validateArr.length > 0) {
          return false;
        } else {
          let res = await apiContractFileBind({
            contractCode: this.formModel.contractCode,
            changeCode: this.formModel.changeCode,
            attachmentList: this.fileList,
          });
          requestTips(res, () => {
            this.dialogShow = false;
          });
        }
      },

      //校验
      validateFn() {
        for (let i in this.$refs) {
          if (this.$refs[i] && this.$refs[i].length > 0) {
            this.$refs[i][0].validate(valid => {
              if (!valid) {
                this.validateArr.push(1);
              }
            });
          }
        }
      },

      hideDialog() {
        this.dialogShow = false;
        this.formModel.contractCode = '';
        this.formModel.changeCode = '';
        this.fileList = [];
      },

      //添加
      addFile() {
        this.fileList.push({
          bizType: '',
          fileTitle: '',
          fileUrl: '',
          guid: guid(),
        });
      },

      //上传成功
      handleSuccess(result, index) {
        let file = result.result
        if (file.data.rows && file.data.rows.length > 0) {
          this.fileList[index].fileId = file.data.rows[0].key;
          this.fileList[index].fileUrl = file.data.rows[0].url;
          this.fileList[index].fileDesc = file.data.rows[0].originalName;
        } else {
          this.$message.error(file.data.message);
        }
      },

      //下载
      uploadLoad(url) {
        let a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      },

      //删除
      deleteFile(list, index) {
        this.fileList.splice(index, 1);
      },
    },

    components: { uploadFile },
  };
</script>
<style lang="scss" scoped>
  .file-name {
    width: 20px;
  }
  .upload-inline {
    margin-top: -4px;
  }
</style>
